<template>
  <div>
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="base">
        <template v-slot:title>
          <div class="panel-tab__title"><i class="el-icon-info"></i>常规</div>
        </template>
        <element-base-info :business-object="elementBusinessObject" />
      </el-collapse-item>
      <el-collapse-item name="condition" v-if="elementType === TaskName.process" key="message">
        <template v-slot:title>
          <div class="panel-tab__title"><i class="el-icon-s-comment"></i>消息与信号</div>
        </template>
        <signal-and-message />
      </el-collapse-item>
      <el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
        <template v-slot:title>
          <div class="panel-tab__title"><i class="el-icon-s-promotion"></i>流转条件</div>
        </template>
        <flow-condition :business-object="elementBusinessObject" />
      </el-collapse-item>
      <el-collapse-item name="condition" v-if="formVisible" key="form">
        <template v-slot:title>
          <div class="panel-tab__title"><i class="el-icon-s-order"></i>表单</div>
        </template>
        <element-form :id="elementId" :type="elementType" />
      </el-collapse-item>
      <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
        <template v-slot:title>
          <div class="panel-tab__title"><i class="el-icon-s-claim"></i>任务</div>
        </template>
        <element-task :id="elementId" :type="elementType" />
      </el-collapse-item>
      <el-collapse-item
        name="multiInstance"
        v-if="elementType.indexOf('Task') !== -1"
        key="multiInstance"
      >
        <template v-slot:title>
          <div class="panel-tab__title"><i class="el-icon-s-help"></i>多实例</div>
        </template>
        <element-multi-instance :business-object="elementBusinessObject" />
      </el-collapse-item>
      <el-collapse-item name="listeners" key="listeners">
        <template v-slot:title>
          <div class="panel-tab__title"><i class="el-icon-message-solid"></i>执行监听器</div>
        </template>
        <element-listeners :id="elementId" />
      </el-collapse-item>
      <el-collapse-item
        name="taskListeners"
        v-if="elementType === TaskName.user"
        key="taskListeners"
      >
        <template v-slot:title>
          <div class="panel-tab__title"><i class="el-icon-message-solid"></i>任务监听器</div>
        </template>
        <user-task-listeners :id="elementId" />
      </el-collapse-item>
      <el-collapse-item name="extensions" key="extensions">
        <template v-slot:title>
          <div class="panel-tab__title"><i class="el-icon-circle-plus"></i>扩展属性</div>
        </template>
        <element-properties :id="elementId" />
      </el-collapse-item>
      <el-collapse-item name="other" key="other">
        <template v-slot:title>
          <div class="panel-tab__title"><i class="el-icon-s-promotion"></i>其他</div>
        </template>
        <element-other-config :id="elementId" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, onBeforeUnmount, onMounted, ref, Ref, toRefs, watch } from 'vue';
import { modeler, ModelerEvents, TaskName } from '@/views/page-config/flow/flow-modeler';
import ElementBaseInfo from '@/views/page-config/flow/custom-properties/ElementBaseInfo.vue';
import ElementForm from '@/views/page-config/flow/custom-properties/ElementForm.vue';
import ElementListeners from '@/views/page-config/flow/custom-properties/ElementListeners.vue';
import ElementMultiInstance from '@/views/page-config/flow/custom-properties/ElementMultiInstance.vue';
import ElementOtherConfig from '@/views/page-config/flow/custom-properties/ElementOtherConfig.vue';
import ElementProperties from '@/views/page-config/flow/custom-properties/ElementProperties.vue';
import ElementTask from '@/views/page-config/flow/custom-properties/ElementTask.vue';
import FlowCondition from '@/views/page-config/flow/custom-properties/FlowCondition.vue';
import SignalAndMessage from '@/views/page-config/flow/custom-properties/SignalAndMessage.vue';
import UserTaskListeners from '@/views/page-config/flow/custom-properties/UserTaskListeners.vue';

export default defineComponent({
  name: 'FlowDesignProperties',
  components: {
    ElementBaseInfo,
    ElementForm,
    ElementListeners,
    ElementMultiInstance,
    ElementOtherConfig,
    ElementProperties,
    ElementTask,
    FlowCondition,
    SignalAndMessage,
    UserTaskListeners
  },
  setup(props) {
    const activeName: Ref = ref('base');
    const elementBusinessObject: Ref = ref(null);
    const elementType: Ref = ref('');
    const elementId: Ref = ref('');
    const formVisible: Ref<boolean> = ref(false);
    const conditionFormVisible: Ref<boolean> = ref(false);
    const initModels = () => {
      // 初始化 modeler 以及其他 moddle
      if (!modeler.getModeler()) {
        // 避免加载时 流程图 并未加载完成
        /*const timer = */ setTimeout(() => initModels(), 10);
        return;
      }
      // if (timer) clearTimeout(this.timer);

      // 初始第一个选中元素 bpmn:Process
      initFormOnChanged(null);
      modeler.getModeler().on(ModelerEvents.importE, (e: any) => {
        initFormOnChanged(null);
      });
      // 监听选择事件，修改当前激活的元素以及表单
      modeler.getModeler().on(ModelerEvents.selectionChanged, (v: any) => {
        initFormOnChanged(v.newSelection[0] || null);
      });
      modeler.getModeler().on(ModelerEvents.elementChanged, (v: any) => {
        // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
        if (v.element && v.element.id === elementId.value) {
          initFormOnChanged(v.element);
        }
      });
    };
    // 初始化数据
    const initFormOnChanged = (element: any) => {
      let activatedElement = element;
      if (!activatedElement) {
        activatedElement =
          modeler.getElementRegistry().find((el: any) => el.type === TaskName.process) ??
          modeler.getElementRegistry().find((el: any) => el.type === TaskName.collabor);
      }
      console.log('initFormOnChanged...........', activatedElement);
      if (!activatedElement) return;
      // Log.printBack(`select element changed: id: ${activatedElement.id} , type: ${activatedElement.businessObject.$type}`);
      // Log.prettyInfo("businessObject", activatedElement.businessObject);
      modeler.setActiveElement(activatedElement);
      // this.bpmnElement = activatedElement;
      elementId.value = activatedElement.id;
      elementType.value = activatedElement.type; //.split(":")[1] || "";
      elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject));
      conditionFormVisible.value = !!(
        elementType.value === TaskName.sequence &&
        activatedElement.source &&
        activatedElement.source.type.indexOf('StartEvent') === -1
      );
      formVisible.value =
        elementType.value === TaskName.user || elementType.value === TaskName.start;
      console.log(
        'initFormOnChanged...........over',
        activatedElement,
        elementId.value,
        elementType.value
      );
    };
    initModels();
    onMounted(() => {});
    onBeforeUnmount(() => {});
    watch(elementId, () => {
      activeName.value = 'base';
    });
    return {
      activeName,
      elementType,
      elementId,
      elementBusinessObject,
      formVisible,
      conditionFormVisible,
      TaskName
    };
  }
});
</script>
<style scoped lang="scss">
.#{$prefix} {
  &-flow-prop {
    //margin: 10px;
    //padding: 0;
    //overflow-y: auto;
    height: 100%;
    &-panel-custom {
      position: absolute;
      height: 100%;
      width: 30%;
      top: 100px;
      right: 10px;
      overflow-y: auto;
      background: #f0f2f5;
    }
    &-base-info {
    }
    &-signal {
    }
    &-condition {
    }
    &-form {
    }
    &-task {
    }
    &-multi-instance {
    }
    &-listeners {
    }
    &-task-listeners {
    }
    &-properties {
    }
    &-other-config {
    }
  }
}
</style>
